import React, { useState, useEffect, useRef } from 'react';
import './index.less';
import { SearchOutline, FilterOutline } from 'antd-mobile-icons';
import Popup from 'antd-mobile/es/components/Popup';
import Space from 'antd-mobile/es/components/Space';
import Selector from 'antd-mobile/es/components/Selector';

import Search from './components/search';

import { apihook } from '../../hooks';
import axios from 'axios';
export default function (props) {
  const [tag, setTag] = useState([
    { id: 1, name: '普通讲师', ishow: true },
    { id: 2, name: '高级讲师', ishow: false },
    { id: 3, name: '特聘讲师', ishow: false },
    { id: 4, name: '超级讲师', ishow: false },
  ]);
  // const inputRef = useRef(); // input 上的ref
  // const [inputValue, setInputValue] = useState(''); // input 获取到的值

  const [selectTag, setSelectTag] = useState(1); //  选中的id
  const [input, setInput] = useState('');
  const [selectValue, setSelectValue] = useState([]);
  const [data, setData] = useState([]);

  let a = [];

  // const [initData, setInitData] = useState([]);
  const [page, setPage] = useState(1); // 当前页数
  // const [allpage, setAllpage] = useState(0); // 总页数

  const handleTag = (item, index) => {
    // console.log('点击导师按钮 pgae的页码是：', page);
    document.documentElement.scrollTop = 0; // 点击以后回到顶部
    //  改变 高亮显示
    setSelectTag(item.id); //  这个赋值是 异步的
    let a = null;
    a = tag.map((i) => ({ ...i, ishow: item.id == i.id ? true : false }));
    setTag(a);
    setPage(1);
    // initDataFn(item.id, 1, input, selectValue).then(res => {
    //   console.log("res::", res.data.data.List)
    //   setData(res.data.data.List)
    // }).catch(err => {
    //   console.log("err:", err)
    // })
  };

  const handleInput = (value) => {
    setInput(value);
  };
  const handleSelect = (value) => {
    setSelectValue(value);
  };

  const initDataFn = async (status = 1, pageNo = 1, username, tags) => {
    return await apihook({
      status,
      pageNo,
      username,
      tags,
    });
  };

  return (
    <div>
      {/* tab 选择 */}
      <div style={{ position: 'sticky', top: '0px' }}>
        <div className="footer_tag">
          {tag.map((item, index) => {
            return (
              <div
                key={item.id}
                className={
                  item.ishow
                    ? 'footer_tag_item footer_tag_item_action'
                    : 'footer_tag_item '
                }
                onClick={() => handleTag(item, index)}
              >
                {' '}
                {item.name}{' '}
              </div>
            );
          })}
        </div>
      </div>

      <Search
        page={page}
        status={selectTag}
        handleInput={handleInput}
        handleSelect={handleSelect}
        data={data}
        // handleTag={handleTag}
      />
    </div>
  );
}
